<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- v-bind 指令，用于绑定标签属性的值 -->
<body>
    <div id="app">

        <div>
            <!-- 动态绑定 -->
            <img v-bind:src="imgUrl"  v-bind:alt="imgAlt" v-bind:title="imgTitle" style="margin-right: 1rem;"/>

            <!-- 简写模式 -->
            <img :src="imgUrl" :alt="imgAlt" :title="imgTitle"/>
        </div>
    </div>
    <script src="js/vue.js"></script>

    <script>
        const HelloVue = {
            data(){
                return {
                    imgUrl : 'https://app-center.cdn.bcebos.com/appcenter/sts/pcfile/503918235/b660650417b21e3b73e0bc49b199cfba.jpg',
                    imgAlt : '图片',
                    imgTitle : '图片说明'
                }
            }
        };

        setTimeout( ()=> {
            const app = Vue.createApp(HelloVue).mount("#app");
        }, 1000 );
       
    </script>
</body>
</html>